<template>
	<view class="personalContainer">
		<view class="header" @click="toLogin">
			<image class="userImg" :src="userinfo.avatarUrl?userinfo.avatarUrl:'../../static/images/personal/personal.png'" mode=""></image>
			<view class="userInfo">
				<p>{{userinfo.nickName?userinfo.nickName:'未登录'}}</p>
				<p class="login">{{userinfo.nickName?'微信用户':'点击登录账号'}}</p>
			</view>
		</view>
		<view class="content">
			<h2 class="title">我的资产</h2>
			<p class="line"></p>
			<view class="myAssetList">
				<view class="assetItem">
					<span class="money">￥0</span>
					<span>回馈金</span>
				</view>
				<view class="assetItem">
					<span class="money">￥0</span>
					<span>红包</span>
				</view>
				<view class="assetItem">
					<span class="money">￥0</span>
					<span>优惠卷</span>
				</view>
				<view class="assetItem">
					<span class="money">￥0</span>
					<span>津贴</span>
				</view>
				<view class="assetItem">
					<span class="money">￥0</span>
					<span>礼品卡</span>
				</view>
			</view>
		</view>

		<!-- 列表选项 -->
		<view class="perosonalList">
			<view class="navItem" v-for="(item,index) in perosonalList" :key='index'>
				<i :class="item.icon" class='iconfont' ></i>
				<p class="itemText">{{item.name}}</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo:{},
				perosonalList:				[	
				{
					name: '我的订单',
					icon: 'icon-dingdan11'
				}, 
				{
					name: '我的拼团',
					icon: 'icon-pintuandingdan'
				}, 
				{
					name: '领红包',
					icon: 'icon-tubiaolunkuo-1'
				}, 
				{
					name: '我的积分',
					icon: 'icon-jifen3'
				}, 
				{
					name: '地址管理',
					icon: 'icon-dizhiguanli'
				},
				{
					name: '账号安全',
					icon: 'icon-zhanghaoanquan'
				},
				{
					name: '联系客服',
					icon: 'icon-caidaniconwodehui'
				},
				{
					name: '用户反馈',
					icon: 'icon-dangqianhuihua'
				},
				{
					name: '帮助中心',
					icon: 'icon-bangzhuzhongxin'
				},
				{
					name: '退还/售后',
					icon: 'icon-shouhou'
				},
				],
			}
		},
		// options拥有路由传递的数据
		// onLoad(options) {
			
		// }
		// 要么通过实参传递 要么通过实例对象传递参数
		// this身上拥有$mp属性,内部存储小程序原生options
		mounted() {
			// console.log(this);
			console.log(this.$mp.query.userinfo);
			let  {userinfo} = this.$mp.query
			if(userinfo){ 
				//用于首次用户授权成功,Login页面跳转回来之后触发

				this.userinfo = JSON.parse(userinfo)
			}else{
				//用于二次登录,用户授权已成功,直接获取用户之前的授权信息
				uni.getUserInfo({
					//用箭头函数获取外部this指向
					success: (res) => {
						this.userinfo = res.userInfo
					}
				})
			}
		},
		methods:{
			toLogin(){
				// 对象转换布尔值为true
				if(this.userinfo.nickName) return
				 uni.navigateTo({
					//绝对路径
					url:"/pages/login/login",
					// animationType: 'pop-in',
					// animationDuration: 200
				})
			}
		}
	}
</script>

<style lang="stylus">
	.personalContainer
		width 100%
		margin 0
		padding 0
		.header
			display flex
			align-items: center;
			width 100%
			height 200upx
			background-color #EED7B5
			box-shadow 2px 2px 2px #eee
			.userImg
				width 120upx
				height 120upx
				margin-left 20px
				background #fff
				border-radius 50%
			.userInfo
				height 100upx
				line-height 50upx
				margin-left 20px
				font-size 32upx
				.login
					font-size 30upx
		.content
			width 90%
			margin  0 auto
			.title
				margin 30upx 0
			.line
				width 100%
				height 2upx
				background-color #C0C0C0
			.myAssetList
				display flex
				justify-content space-around
				text-align center
				font-size 30upx
				margin 20upx 0
				.assetItem
					.money
						display block
						margin-bottom 8upx
						color #555555
		.perosonalList	
			display flex
			flex-wrap wrap
			.navItem
				width 33.333%
				height 160upx
				text-align center
				border 1upx solid #eee
				box-sizing border-box
				.iconfont
					margin-top 26upx
					font-size 60upx
				.itemText
					font-size 28upx


</style>
